<template>
  <div id="login" style="text-align: center">
    <div style="margin-top: 130px">
      <img src="../assets/logo.png" width="400px;height: 20px">
    </div>
    <div class="colorLump">
      <div class="font">
        <span>欢迎登录</span>
      </div>
      <div class="user" style="margin-top: 30px;">
        <el-input prefix-icon="el-icon-user-solid" v-model="user.userName" placeholder="账号"></el-input>
      </div>
      <div class="user" style="margin-top: 20px">
        <el-input prefix-icon="el-icon-lock" v-model="user.password" placeholder="密码" show-password></el-input>
      </div>
      <div style="margin-top: 20px;width: 200px;margin-left: 25px;">
        <div style="width: 100px;display: inline-block">
          <el-input v-model="vcode" placeholder="验证码" @keyup.enter.native="login"></el-input>
        </div>
        <div style="display: inline-block" @click="createCode">{{ checkCode }}</div>
      </div>
      <div class="amendPW" v-on:click="goToPassWord">
        <span>修改密码</span>
      </div>
      <div>
        <el-button style="width:270px;margin-top: 10px;align: center" type="success" @click="login">登录</el-button>
      </div>
    </div>
    <div class="recordmsg">
      <p>地址：北京市朝阳区潘家园南里19号人卫大厦</p>
      <p>
        版权：© {{ currentYear }}北京人卫智数科技有限公司
        <a href="http://beian.miit.gov.cn" target="_blank">京ICP备19054460号-1</a>
        <img src="../../static/img/record_icon.png" width="20px" height="20px" style="vertical-align:middle;">
        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502039674" target="_blank">京公网安备
          11010502039674号</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: {
        userName: '',
        password: '',
      },
      checkCode: '',
      vcode: '',
      currentYear: new Date().getFullYear()
    }
  },
  mounted() {
    this.createCode();
  },
  methods: {
    goToPassWord() {
      this.$router.push("/amend")
    },
    createCode() {
      let code = "";
      const codeLength = 4; //验证码的长度
      const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数
      for (let i = 0; i < codeLength; i++) { //循环操作
        let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        code += random[index]; //根据索引取得随机数加到code上
      }
      this.checkCode = code; //把code值赋给验证码
    },

    login() {

      if (!this.user.userName) {
        this.$message.warning("必须填写账户")
        return
      }
      if (!this.user.password) {
        this.$message.warning("必须填写密码")
        return
      }
      if (this.checkCode.toUpperCase() !== this.vcode.toUpperCase()) {
        this.$message.warning("请输入正确的验证码")
        this.createCode()
        return
      }
      this.axios.post('/pmph/action/pmph/login', this.user)
        .then(() => {
          this.$router.push({name: 'Index'})
        })
    }
  },
}
</script>

<style scoped>
#login {
  background: url("../assets/背景图.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  position: absolute;
}

.colorLump {
  background-color: #FFFF;
  opacity: 0.8;
  width: 360px;
  height: 330px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;

}

.font {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1.5px;
  display: inline-block;
  margin-top: 20px;

}

.user {
  width: 260px;
  margin-left: 50px;
}

.amendPW {
  margin-left: 250px;
  font-size: 12px;
  color: #0f45ff
}

a {
  text-decoration: none;
  color: #666666;
}

.recordmsg {
  color: #666666;
  width: 100%;
  position: absolute;
  bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}
</style>

